<template>
  <view class="itinerary-container">
    <view class="header">
      <text class="title">我的行程</text>
      <button class="create-btn" @click="createNewPlan">
        <text class="icon">➕</text>
        <text class="text">新建行程</text>
      </button>
    </view>
    
    <view class="content">
      <view v-if="loading" class="loading">
        <uni-load-more status="loading" :content-text="loadingText"></uni-load-more>
      </view>
      
      <view v-else-if="error" class="error-message">
        {{ error }}
        <button class="retry-btn" @click="loadPlans">重试</button>
      </view>
      
      <view v-else-if="plans.length === 0" class="empty-state">
        <text class="icon">📝</text>
        <text class="text">暂无行程规划</text>
        <button class="create-btn" @click="createNewPlan">创建新行程</button>
      </view>
      
      <view v-else class="plan-list">
        <view v-for="plan in plans" :key="plan.id" class="plan-card" @click="goToPlanDetail(plan.id)">
          <view class="plan-header">
            <text class="plan-name">{{ plan.planName }}</text>
            <text class="plan-time">{{ formatDate(plan.createTime) }}</text>
          </view>
          <view class="plan-content">
            <text class="content-text">{{ formatContent(plan.travelPlan) }}</text>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { getUserTravelPlans } from '@/api/plan';

export default {
  data() {
    return {
      userId: null,
      plans: [],
      loading: false,
      error: '',
      loadingText: {
        contentdown: '正在加载...',
        contentrefresh: '加载中...',
        contentnomore: '没有更多数据了'
      }
    }
  },
  onLoad() {
    // 获取当前登录用户ID
    const userInfo = uni.getStorageSync('userInfo');
    this.userId = userInfo ? userInfo.id : null;
    
    if (!this.userId) {
      uni.showToast({
        title: '请先登录',
        icon: 'none'
      });
      setTimeout(() => {
        uni.navigateTo({
          url: '/pages/login/login'
        });
      }, 1500);
      return;
    }
    
    this.loadPlans();
  },
  onPullDownRefresh() {
    this.loadPlans();
  },
  methods: {
    async loadPlans() {
      if (!this.userId) return;
      
      this.loading = true;
      this.error = '';
      
      try {
        const response = await getUserTravelPlans(this.userId);
        
        if (response.code === 200 && response.data) {
          this.plans = response.data;
        } else {
          this.error = response.message || '获取行程列表失败';
        }
      } catch (error) {
        console.error('加载行程列表出错:', error);
        this.error = '网络错误，请稍后重试';
      } finally {
        this.loading = false;
        uni.stopPullDownRefresh();
      }
    },
    
    formatContent(content) {
      if (!content) return '';
      // 移除所有**符号
      return content.replace(/\*\*/g, '');
    },
    
    formatDate(dateStr) {
      if (!dateStr) return '';
      const date = new Date(dateStr);
      const year = date.getFullYear();
      const month = String(date.getMonth() + 1).padStart(2, '0');
      const day = String(date.getDate()).padStart(2, '0');
      const hour = String(date.getHours()).padStart(2, '0');
      const minute = String(date.getMinutes()).padStart(2, '0');
      return `${year}-${month}-${day} ${hour}:${minute}`;
    },
    
    goToPlanDetail(planId) {
      uni.navigateTo({
        url: `/package-itinerary/pages/planning?id=${planId}`
      });
    },
    
    createNewPlan() {
      uni.navigateTo({
        url: '/package-itinerary/pages/planning'
      });
    }
  }
}
</script>

<style lang="scss">
.itinerary-container {
  padding: 30rpx;
  background-color: #f5f5f5;
  min-height: 100vh;
  
  .header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30rpx;
    padding: 20rpx;
    background-color: #fff;
    border-radius: 12rpx;
    box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
    
    .title {
      font-size: 36rpx;
      font-weight: bold;
      color: #333;
      flex: 1;
    }
    
    .create-btn {
      display: flex;
      align-items: center;
      padding: 12rpx 30rpx;
      background: linear-gradient(135deg, #4CAF50, #388E3C);
      color: #fff;
      border-radius: 30rpx;
      font-size: 26rpx;
      border: none;
      margin-left: auto;
      box-shadow: 0 4rpx 12rpx rgba(76, 175, 80, 0.3);
      transition: all 0.3s ease;
      
      &:active {
        transform: scale(0.97);
        box-shadow: 0 2rpx 8rpx rgba(76, 175, 80, 0.2);
      }
      
      .icon {
        margin-right: 8rpx;
        font-size: 28rpx;
      }
      
      .text {
        font-weight: 600;
      }
    }
  }
  
  .content {
    .loading, .error-message, .empty-state {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 50rpx 0;
    }
    
    .error-message {
      color: #f44336;
      text-align: center;
      
      .retry-btn {
        margin-top: 20rpx;
        padding: 12rpx 30rpx;
        background-color: #f44336;
        color: #fff;
        border-radius: 30rpx;
        font-size: 26rpx;
        border: none;
      }
    }
    
    .empty-state {
      text-align: center;
      
      .icon {
        font-size: 80rpx;
        margin-bottom: 20rpx;
      }
      
      .text {
        font-size: 28rpx;
        color: #666;
        margin-bottom: 30rpx;
      }
      
      .create-btn {
        padding: 12rpx 30rpx;
        background-color: #4CAF50;
        color: #fff;
        border-radius: 30rpx;
        font-size: 26rpx;
        border: none;
      }
    }
    
    .plan-list {
      .plan-card {
        background-color: #fff;
        border-radius: 12rpx;
        padding: 30rpx;
        margin-bottom: 30rpx;
        box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
        
        .plan-header {
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-bottom: 20rpx;
          
          .plan-name {
            font-size: 32rpx;
            font-weight: bold;
            color: #333;
            max-width: 70%;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
          }
          
          .plan-time {
            font-size: 24rpx;
            color: #999;
            flex-shrink: 0;
            margin-left: 20rpx;
          }
        }
        
        .plan-content {
          .content-text {
            font-size: 28rpx;
            color: #666;
            line-height: 1.6;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 3;
            overflow: hidden;
            text-overflow: ellipsis;
          }
        }
      }
    }
  }
}
</style> 